<template>
    <!-- 轮播图 -->
<div>
    <div style="height: 50px; text-align: center; line-height: 50px">
        <div @click="back" style="float: left; margin-top: 5px; margin-left: 15px;">
            <img src="../../assets/themes/images/exit.png" height="30" width="30" />
        </div>
        {{ content_info['title'] }}
        <div @click="showPopup" style="float: right; margin-top: 5px; margin-right: 15px;">
            <img :src="content_info.writer_image" height="30" width="30" style="border-radius:100%" />
        </div>
    </div>
    <van-popup v-model="show" round position="top" :style="{ height: '30%' }">
        内容
    </van-popup>
    <div class="swiper-container">
        <swiper ref="mySwiper1" :options="swiperOptions" >
            <swiper-slide v-for="(item,index) in content_info.image" :key="index">
                <div class="slide-wrap">
                    <img :src="item" alt="">
                </div>
            </swiper-slide>
            <!-- 分页器-->
            <div class="swiper-pagination" slot="pagination"></div>
            <!-- 滚动条 -->
            <div class="swiper-scrollbar" slot="scrollbar"></div>
            
        </swiper>
        <!-- 导航按钮 -->
        <div class="swiper-button-prev" slot="navigation"></div>
        <div class="swiper-button-next" slot="navigation"></div>
    </div>
    <div style="padding: 10px">
        {{ content_info['content_text'] }}
    </div>
    <hr />
    <hr />
</div>
</template>

<script>
import Vue from 'vue';
import { Popup } from 'vant';
import 'vant/lib/popup/style'

Vue.use(Popup);
  export default {
    components:{
    },
    name: 'carrousel',
    data() {
        return {
            content_info:{},
            // 轮播图的设置
            swiperOptions: {
                // 鼠标变成小手
                grabCursor : true,
                // 环路
                loop: true,
                autoplay: {
                    disableOnInteraction: false,
                },
                // 分页符
                pagination: {
                    el: '.swiper-pagination',
                    clickable :true,
                },
                // 换页按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                effect : "flip",
                
              // Some Swiper option/callback...
            },
            show: false,
        }
    },
    
    computed: {
      swiper1() {
        return this.$refs.mySwiper1.$swiper
      },
    },
    methods: {
        tabClick(index) {
            this.nowIndex = index
            this.swiper2.slideTo(this.nowIndex, 1000, false)
        },
        back(){
            this.$router.go(-1)
        },
        showPopup() {
            this.show = true;
        }
    },
    mounted() {
    //   console.log(this.$route.query.id, 1)
        this.$axios.get('get_data/get_content/', {
            params:{
                "content_id":this.$route.query.id
            }
        }).then(res=>{
            if (res.data['data'].lenth == 0){
                this.$route.go(-1)
                alert("文章没找到")
            }
            else (
                this.content_info = res.data.data,
                console.log(this.content_info)
            )
        })
    },
    
  }
</script>

<style scoped>
.slide-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}
.slide-wrap img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}
</style>
